<template>
  <div class="achievement" v-cloak>
    <div class="bg_color"></div>
    <div style="height: 4px;position: absolute;z-index: 2222; width: 100%; top: 46px;background: #f0f0f0"></div>
    <div style="height: 50px;"></div>
    <div class="about-us" v-show="show">
        <div class="rese_content">
          <p class="rese_p">
            预约编号：{{info.so_order_no}}
          </p>
          <p class="rese_p">
            服务状态：{{info.so_status}}
          </p>
          <p class="rese_p">
            <label>备注需求：</label><span class="address">{{info.so_remark}}</span>
          </p>
          <div class="rese_p">
            <label>服务地址：</label><span class="address">{{info.so_user_address}}</span>
            <p class="res_ps">
              <span class="fl_right1">{{info.so_user_mobile}}</span>
              {{info.so_user_name}}
            </p>
          </div>
          <div class="detail_pho" v-if="info.so_status != '待付款' && btn && title === '我的服务'">
            <a :href="tel + staffInfo.mobile" style="display: inline-block;width: 30px;height: 37px;float: right;"><span class="fl_right1 detail_ri"><img src="../assets/image/fuxq_btn_05.png" alt=""></span></a>
            <p class="detail_po">
              <span class="phos_img"><img :src="staffInfo.headimg" alt=""></span>
              <span class="phos_ti">{{staffInfo.nickname}}</span>
              <span class="phone_img"><img src="../assets/image/kdfw_11.png" alt=""></span>
            </p>
          </div>
        </div>

        <div class="rese_content">
          <p  class="rese_p">
            {{info.so_service_name}}
          </p>
          <p class="rese_p">
            <span class="fl_right1 colo_red"></span>
            服务时间：{{info.so_service_time}}
          </p>
          <p class="rese_p2">
            <span class="fl_right1">实付：<span class="red">¥{{info.so_pay_price}}</span></span>
            下单时间：{{info.so_add_time}}
          </p>
        </div>
        <div>

        <div class="evaluate" v-if="info.so_status == '已完成'">
          <div class="evaluateTitle"><i></i>评价详情</div>
          <div class="level"><span>评级</span>
            <ul class="stars" style="display: inline-block;vertical-align: -2px;">
              <li v-for="(item,index) in stars" :class=" { yellow : index < starsNum } "></li>
            </ul>
          </div>
          <p class="text">{{evaluate.evaluate_content}}</p>
          <!-- <img :src="item" v-for="item in evaluateImg"> -->
          <div class="upload">
            <div class="uplodaLi" v-for="(item,index) in evaluateImg">
              <div class="fill_img">
                <img :src="item" @click="seeImg(index)" />
              </div>
            </div>
            <div class="clear"></div>
          </div>
          <p class="date">{{evaluate.evaluate_time}}</p>
        </div>
        <div v-if="title === '我的服务'">
          <div class="bottom" v-if="info.so_status == '待评价'">
            <div class="bottomBtn" @click="evaluateFunc" >评价</div>
          </div>
          <div class="bottom" v-if="info.so_status == '待付款'">
            <div class="bottomBtn" @click="pay" >付款</div>
          </div>
          <div class="bottom" v-if="info.so_status == '进行中' && btn">
            <div class="bottomBtn" @click="completes" >完成</div>
          </div>
          <div class="bottom" v-if="info.so_status == '进行中' && !btn">
            <div class="bottomBtn" style="background: #ccc !important" >暂未接单</div>
          </div>
        </div>
       <div v-if="title === '我的订单'">
         <div class="bottom"  v-if="info.so_status == '待接单'">
           <div class="bottomBtn" @click="serviceReceipt">接单</div>
         </div>
       </div>
          <div class="delFix" @click="hideFix" v-if="isDel">
            <div class="fixBox">
              <p>确定要{{buttonname}}吗？</p>
              <div class="cancel btn" @click="hideFix" style="line-height:22px;float: left;margin-left: 20px;">取消</div>
              <div class="confirm btn" @click.stop="submit" style="line-height:22px;">确定</div>
            </div>
          </div>
    </div>
  </div>
  </div>
</template>
<script>
  import { TransferDom } from 'vux'
  export default {
    name: 'ReservationDetail',
    directives: {
      TransferDom
    },
    data () {
      return {
        show: false,
        stars: [0, 1, 2, 3, 4],
        starsNum: 0,
        info: {},
        staffInfo: {},
        evaluate: '',
        evaluateImg: [],
        btn: '',
        role: '',
        isDel: false,
        buttonname: '',
        so_id: '',
        tel: 'tel:'
      }
    },
    methods: {
      setmode: function (name, content) {
        let mode = this.$chaos.config('mode')
        if (mode === 'website') {
          sessionStorage[name] = JSON.stringify(content)
        } else {
          localStorage[name] = JSON.stringify(content)
        }
      },
      completes: function () {
        this.buttonname = '完成订单'
        this.isDel = true
      },
      evaluateFunc: function () {
        this.setmode('evaimg', this.staffInfo.headimg)
        window.location.href = '#/Evaluate?order_no=' + this.info.so_order_no + '&headimg=' + encodeURI(this.staffInfo.headimg) + '&name=' + encodeURI(this.staffInfo.nickname)
      },
      comleteAjax: function () {
        let thisObj = this
        thisObj.$chaos.ajax({
          data: {
            so_id: thisObj.so_id
          },
          slient: true,
          userinfo: true,
          url: 'Service/finishServiceOrder',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
              thisObj.isDel = false
              setTimeout(function () {
                window.history.back(-1)
              }, 300)
            } else {
              thisObj.show = true
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      acceptAjax: function () {
        let thisObj = this
        thisObj.$chaos.ajax({
          data: {
            so_id: thisObj.so_id
          },
          slient: true,
          userinfo: true,
          url: 'Service/serviceReceipt',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
              thisObj.isDel = false
              setTimeout(function () {
                window.history.back(-1)
              }, 300)
            } else {
              thisObj.show = true
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      submit: function () {
        let thisObj = this
        if (thisObj.buttonname === '接单') {
          thisObj.acceptAjax()
        } else if (thisObj.buttonname === '完成订单') {
          thisObj.comleteAjax()
        }
      },
      hideFix: function () {
        this.isDel = false
      },
      serviceReceipt: function () {
        this.buttonname = '接单'
        this.isDel = true
      },
      pay: function () {
        let thisObj = this
        thisObj.$vux.loading.show({
          text: '加载中'
        })
        thisObj.$chaos.ajax({
          data: {
            order_no: thisObj.info.so_order_no,
            openid: thisObj.$chaos.getOpenId()
          },
          slient: true,
          userinfo: false,
          url: 'Pay/jsapiPayOrder',
          callback: function (type, res) {
            thisObj.$vux.loading.hide()
            if (res.status === 'SUCCESS') {
              WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                  'appId': res.result.wxpay_data.appid,
                  'timeStamp': '' + res.result.wxpay_data.timestamp,
                  'nonceStr': res.result.wxpay_data.noncestr,
                  'package': 'prepay_id=' + res.result.wxpay_data.prepayid,
                  'signType': 'MD5',
                  'paySign': res.result.wxpay_data.sign
                },
                function (res) {
                  if (res.err_msg === 'get_brand_wcpay_request:ok') {
                    thisObj.$vux.toast.show({
                      text: '恭喜您下单成功',
                      type: 'text',
                      width: '180px',
                      position: 'bottom'
                    })
                  }
                }
              )
            } else {
              thisObj.show = true
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      complete: function () {

      },
      verify: function () {
        let thisObj = this
        this.$store.commit('footerShow', false)
        this.title = decodeURI(this.$chaos.getQueryString('title'))
        this.so_id = this.$chaos.getQueryString('so_id')
        if (this.title === '我的订单') {
          this.$chaos.setTitle('订单详情')
          this.$store.commit('headerShow', true)
          this.$store.commit('title', '订单详情')
          this.role = '员工'
        } else {
          this.$chaos.setTitle('服务详情')
          this.$store.commit('headerShow', true)
          this.$store.commit('title', '服务详情')
        }
        thisObj.$chaos.ajax({
          data: {
            so_id: thisObj.$chaos.getQueryString('so_id'),
            order_status: decodeURI(thisObj.$chaos.getQueryString('order_status')),
            role: this.role
          },
          slient: true,
          userinfo: true,
          url: 'Service/getServiceOrderDetail',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.show = true
              thisObj.info = res.result.order_info
              thisObj.staffInfo = res.result.staff_info
              thisObj.btn = res.result.btn_name
              thisObj.evaluate = res.result.evaluate_info
              thisObj.starsNum = res.result.evaluate_info.evaluate_store
              thisObj.evaluateImg = res.result.evaluate_info.evaluate_image
            } else {
              thisObj.show = true
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      }
    },
    created: function () {
      this.verify()
    },
    mounted: function () {
      window.scrollTo(0, 2000)
    },
    watch: {
      '$route': 'verify'
    }
  }
</script>
<style scoped>
  [v-cloak] {
    display: block;
  }
  body{background: rgb(249,249,249)}
  [v-cloak]{display: none}
  .rese_p{
    line-height: 40px;
    border-bottom: 1px solid #f9f9f9;
    font-size: 14px;
    position: relative;
  }
  .rese_p2{
    color: #cacaca;
    line-height: 37px;
    font-size: 14px;
    overflow: hidden;
  }
  .rese_content{
    background: #fff;
    padding: 0px 15px;
    margin-bottom: 4px;
  }
  .btn_y{
    width: 50px;
    height: 24px;
    text-align: center;
    color: #fff;
    background: #ffa128;
    border-radius: 5px;
    line-height: 24px;
    margin-top: 5px;
  }
  .res_p1{
    line-height: 30px;
  }
  .fl_right1{
    float: right;
  }
  .colo_yellow{
    color: #ffa128;
  }
  .res_ps{
    margin-left: 70px;
    line-height: 19px;
    margin-bottom: 8px;
  }
  .detail_pho{

  }
  .phos_img{
    width: 30px;
    height: 30px;
    display: block;
    float: left;
    margin-right:10px;
  }
  .phos_img img{
    border-radius: 50%
  }
  .phos_ti{
    line-height: 31px;
    float: left;
  }
  .phone_img{
    width: 15px;
    height: 15px;
    display: block;
    float: left;
    margin-left: 10px;
    margin-top: 7px;
  }
  img{
    width:100%;
    height:100%;
  }
  .detail_po{
    background: #fff;
    overflow: hidden;
    padding: 5px 0px;
  }
  .detail_ri{
    width: 9px;
    height: 14px;
    margin-top: 11px;
  }
  .content{padding-bottom: 50px}
  .red{color: #ff2c2c}
  .rese_p label{width: 70px;float: left;}
  .rese_p .address{line-height: 20px;top: 10px;width: calc(100% - 70px);padding: 10px 0}
  .bottom{width: 100%;height: 50px;background: #fff;position: fixed;bottom: 0;z-index: 1}
  .bottom .bottomBtn{background: rgb(255,160,40);color: #f5f5f5;width: 92%;height: 40px;line-height: 40px;text-align: center;margin: 0 auto;border-radius: 4px;margin: 5px auto}
  .evaluate{padding: 0 15px;background: #fff}
  .evaluate .evaluateTitle{color: rgb(255,161,40);height: 40px;line-height: 40px;text-indent: 25px;position: relative;}
  .evaluate .evaluateTitle i{background: url("../assets/image/ddxq_pjxq.png");background-size: 100% 100%;height: 20px;width: 20px;top: 10px;left: 0;display: block;position: absolute;}
  .evaluate .level{height: 20px;line-height: 20px;border-top: 1px solid #f9f9f9;padding: 5px 0;font-size: 14px;color: #999;}
  .evaluate .level span{float: left;margin-right: 7px}

  .evaluate .level .stars li{background: url("../assets/image/yy_icon_s_03.png");background-size: 100% 100%;width: 16px;height: 16px;float: left;margin-right: 2px}
  .evaluate .level .stars li.yellow{background: url("../assets/image/yy_icon_s_02.png");background-size: 100% 100%;}
  .evaluate .text{height: 40px;line-height: 20px;color: #333;font-size: 14px;overflow: hidden;}
  .evaluate .date{color: #bbb;text-align: right;font-size: 14px;height: 20px;line-height: 20px;padding-bottom: 5px}

  .uplodaLi{width: 60px;height: 60px;float: left;margin-right: 4%;overflow: hidden;box-sizing: border-box;margin-bottom: 7px;position: relative;}
  .fill_img{width: 100%;height: 100%;position: relative;}
  .uplodaLi img{width: 100%;height: 100%;display: block;position: absolute;z-index: 1}
  .clear{clear: both}
  .delFix {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0,0,0,0.3);
    left: 0;
    top: 0;
    z-index: 1;
  }
  .delFix .fixBox {
    width: 200px;
    height: 70px;
    margin: 250px auto 0;
    background: #fff;
    border-radius: 10px;
    position: relative;
    padding: 30px 0 15px;
  }
  .delFix .fixBox > p {
    text-align: center;
    height: 20px;
    line-height: 20px;
    margin-bottom: 20px;
  }
  delFix .fixBox .cancel {
    float: left;
    margin-left: 23px;
    color: rgb(255,160,40);
  }
  .delFix .fixBox .btn {
    width: 65px;
    height: 25px;
    border: 1px solid rgb(255,160,40);
    border-radius: 5px;
    text-align: center;
  }
  .delFix .fixBox .confirm {
    float: right;
    margin-right: 23px;
    color: #fff;
    background: rgb(255,160,40);
  }
  .delFix .fixBox .btn {
    width: 65px;
    height: 25px;
    border: 1px solid rgb(255,160,40);
    border-radius: 5px;
    text-align: center;
  }
</style>
